<script setup>
import login from '../components/login.vue';
import manager from '../components/manager.vue'
import enroll from '../components/enroll.vue'
</script>

<template>
  <div class="main">
    <div class="head"></div>
    <login></login>
    
    <div class="tail"> </div>
  </div>
  <manager></manager>
  <enroll></enroll>
  
</template>

<style scoped>


.head {
  background-color: rgba(0, 0, 0, 0.4);
  position: relative;
  width: 100%;
  padding-bottom: 5%;
  box-shadow: 0px 10px 5px grey;
  top:0px
}
.tail {
  background-color: rgba(0, 0, 0, 0.4);
  position: relative;
  width: 100%;
  padding-bottom: 5%;
  box-shadow: 0px -10px 5px grey;
  top:0px
}
.main{
  background: transparent url('../assets/R-C.jpg') repeat-y center top ;
  width: 100%;
  height: 950px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-position: 38% 90%;
  align-items: center
}


</style>